import { CSSProperties, useEffect, useState } from "react"
type TYPING_TEXT_TYPE = {
    textToType: string;
    style?: CSSProperties;
    isIndent?: boolean;
}
const TypingText = ({ textToType, style,isIndent=true }: TYPING_TEXT_TYPE) => {
    const [typingText, setTypingText] = useState("");
    const [isTyping, setIsTyping] = useState(true);
    let timer: string | number | NodeJS.Timeout | undefined;

    const typeText = (text: string, index: number) => {
        if (index < text.length) {
            setTypingText(text.slice(0, index + 1));
            timer = setTimeout(() => typeText(text, index + 1), 200);
        } else {
            setIsTyping(false);
            clearTimeout(timer);
        }
    };
    useEffect(() => {
        typeText(textToType, 0);
        return () => clearTimeout(timer); // 清除定时器，防止内存泄漏
    }, []);
    return <div>
        <p style={{...style,textIndent: isIndent ? '2em' : ''}}>{typingText} |</p>
    </div>
}

export default TypingText